<template>
	<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#4cd964"></uni-segmented-control>
	<view class="" v-if="current===0">
		<view class="orderCard" v-for="(item,i) in orderData" :key="i">
			<view style="font-size:13rpx;margin-bottom:20rpx;">订单号：{{item.uuid}}</view>
			<view style="display:flex;align-items: center;justify-content:space-between;">
				<image :src="item.info[0]?.img" style="width:100rpx;" mode="widthFix"></image>
				<view style="font-size:28rpx;margin-right:20rpx;">商品：{{item.info[0]?.gName}} {{item.info[0]?.sName}}...</view>
			</view>
			<view style="display:flex;width:690rpx;">
				<view class="cancelOrder">取消订单</view>
				<view class="payBtn">去支付</view>
			</view>
			
		</view>
	</view>
	<view class="" v-if="current===1">
		111
	</view>
	
</template>

<script setup>
	import uniSegmentedControl from '/uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue'
	import {ref} from 'vue'
	import http from '../components/http.js'
	const items = (['未支付', '待发货', '待收货','已完成'])
	const current = ref(0)
	function onClickItem(e){
	 if (current.value != e.currentIndex) {
	       current.value = e.currentIndex;
	     }
		 console.log(current.value)
	}
	const orderData= ref([])
	http.http({url:'/order/query',method:'GET'}).then(res=>{
		orderData.value = res.data.data
	})
</script>

<style>
	.orderCard{
		width:690rpx;
		margin:10rpx auto;
		padding:20rpx;
		background:#f0f0f0;
		border-radius:20rpx;
		box-sizing: border-box;
	}
	.payBtn,.cancelOrder{
		width:150rpx;
		height:60rpx;
		border-radius:20rpx;
		text-align:center;
		line-height:60rpx;
		background:red;
		color:#fff;
		margin-left:20rpx;
	}
	.cancelOrder{
		margin-left:300rpx;
		background:#888;
	}
</style>